{extend name="public/base"  /}
{block name="css"}
<style>
    .layui-table, .layui-table-view{
        margin-top: 0px;
    }
</style>
{/block}

{block name="content"}
<!-- 搜索框 -->
<div class="layui-form">
    <div class="layui-form-item">
        <div class="searchDemo">
            <label class="layui-form-label">条件搜索：</label>
            <div class="layui-inline">
                <div class="layui-input-block">
                    <select id="condition" name="condition" lay-verify="required">
                        <option value=""></option>
                        <option value="id">编号</option>
                        <option value="username">用户昵称</option>
                        <option value="start_time">开始时间</option>
                        <option value="end_time">结束时间</option>
                        <option value="time_count">小时数</option>
                        <option value="seat_number">座位号</option>
                        <option value="is_card">是否月卡</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <input class="layui-input" name="content" id="content" autocomplete="off" placeholder="请输入搜索内容">
            </div>
            <button class="layui-btn" data-type="reload" id="btnSearch">搜索</button>

            <button type="button" class="layui-btn  layui-btn-sm" id="infoAdd"><i class="layui-icon">添加</i></button>
        </div>
    </div>
</div>
<!-- 表单 -->
<table id="infos" lay-filter="operate">

</table>

<!-- 分类-->


<!-- 行操作  -->
<script type="text/html" id="operateBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit" id="ed">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!-- 状态模板 -->
<script type="text/html" id="status">

</script>
{/block}

{block name="js"}
<script>

    layui.use('table',function(){
        var $ = layui.jquery;
        var table = layui.table;
        table.render({
            elem: '#infos'
            ,height: 550
            ,url: '{:url("admin/info/getDatas")}'
            ,title: '预约信息列表'
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                ,groups: 1 //只显示 1 个连续页码
                ,first: false //不显示首页
                ,last: false //不显示尾页

            }
            ,cols: [[
                {field: 'id', title: '编号', sort: true, fixed: 'left'}
                ,{field: 'username', title: '用户昵称',sort: true}
                ,{field: 'start_time', title: '开始时间', sort: true}
                ,{field: 'end_time', title: '结束时间',sort: true, templet: '#cateBar'}
                ,{field: 'time_count', title: '小时数',sort: true}
                ,{field: 'seat_number', title: '座位号',sort: true}
                ,{field: 'is_card', title: '是否月卡',sort: true}
                ,{fixed: 'right', title: '操作',sort: true,toolbar:'#operateBar'}
                // ,{field: 'position_id', title: '位置', sort: true, templet: function (d) {
                //         if (d.position.id == d.position.id) {
                //             return '<span>'+d.position.name+'</span>';
                //         }
                //     }}
                // ,{field: 'is_lend', title: '状态', templet: '#status'}
                // ,{fixed: 'right', title:'操作',align:'center', toolbar: '#operateBar'} //这里的toolbar值是模板元素的选择器
            ]]
            ,id: 'idTest'  //搜索容器id
        });

        //搜索
        $('#btnSearch').click(function () {
             // layer.alert($('#condition').val()+$('#content').val());
            table.reload('idTest', {
                where: { //设定异步数据接口的额外参数，任意设
                    condition: $('#condition').val(),
                    content: $('#content').val()
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });

        //添加书籍
        $('#infoAdd').click(function () {
            window.location.href = "{:url('admin/info/add')}";
        });

        //监听工具栏
        table.on('tool(operate)', function (obj) {
            var data = obj.data;
            console.log(obj);
            if (obj.event === 'edit') {
                var str = "{:url('admin/info/edit', ['id'=>'p_id'])}";
                var str1 = str.replace('p_id',data.id);
                window.location.href = str1;
            }
        });

    });

</script>
{/block}